<template>
	<view class="refund">
		<view class="refund_goods">
			<view class="title">退款商品</view>
			<view class="goods_info">
				<image class="cover_img" :src="orderInfo.image" mode="aspectFill"></image>
				<view class="">
					<view class="title">{{ orderInfo.storeName || '' }}</view>
					<view class="time">时间：{{ orderInfo.activityStartTime || '' }}</view>
					<view class="other_info">
						<view class="tags">
							<view class="" v-if="orderInfo.sku">{{ orderInfo.sku || '' }}</view>
						</view>
						<view class="price">
							<text>￥</text>
							<text class="pirce_val">{{ orderInfo.price || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="refund_desc">
			<view class="title">补充描述</view>
			<view class="desc_content">
				<textarea v-model="refundData.text" placeholder="请输入补充描述内容..." maxlength="255" placeholder-style="color:#B3B3B3;"></textarea>
				<view class="img_list">
					<block v-for="(img,i) in imgList" :key="i">
						<view class="img">
							<image :src="img" mode="aspectFill" @tap="previewImg(i)"></image>
							<view class="del_btn" @click="delImg(i)">
								<uni-icons type="clear" size="20"></uni-icons>
							</view>
						</view>
					</block>
					<view class="upload_btn" @tap="chooseImg">
						<image src="/static/mine/shangchuan.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="submit_btn" @click="submitRefund">提交</view>
	</view>
</template>

<script>
	import baseUrl from "../../../libs/config.js"
	export default {
		data() {
			return {
				orderId: '',
				imgList: [],
				refundData: {
					text: '',
					id: '',
					refund_reason_wap_img: '',
					uni: ''
				},
				maxCount: 9,
				BASE_URL: baseUrl.baseUrl,
				orderInfo: null,
				
			};
		},
		onLoad(e) {
			this.orderId = e.orderId;
			this.refundData.id = e.id;
			this.refundData.uni = e.orderId;
			this.getDetail();
		},
		methods: {
			chooseImg() {
				uni.chooseImage({
					count: this.maxCount - this.imgList.length,
					sourceType: ['album'],
					success: (res) => {
						this.list = []
						res.tempFilePaths.forEach(item => {
							this.upImg(item)
							// this.imgList.push(item)
						})
					}
				});
			},
			upImg(path) {
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: `${this.BASE_URL}api/front/upload/image?pid=7&model=user`,
					filePath: path,
					name: 'multipart',
					header: {
						'Authori-zation': uni.getStorageSync('token'),
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res, "res----数据")
						uni.hideLoading()
						const resData = JSON.parse(res.data)
						if (resData.code == 200) {
							this.imgList.push(resData.data.url)
						} else {
							this.showToast(resData.message)
						}
					}
				});
			},
			delImg(index) {
				this.$delete(this.imgList, index)
			},
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.imgList,
				});
			},
			async getDetail() {
				const res = await this.$api.get(`order/apply/refund/${this.orderId}`);
				if(res.code == 200) {
					this.orderInfo = res.data.orderInfoList;
				}
			},
			async submitRefund() {
				if(this.imgList && this.imgList.length) {
					this.refundData.refund_reason_wap_img = this.imgList.join(',')
				}
				if(!this.refundData.text) {
					return this.showToast('请填写退款原因');
				}
				const res = await this.$api.post('order/refund', this.refundData);
				if (res.code == 200) {
					this.showToast('反馈成功');
					setTimeout(v => {
						uni.navigateBack();
					}, 2500)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.refund {
		padding: 20rpx 26rpx;
		box-sizing: border-box;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.refund_goods {
			padding: 28rpx 26rpx 42rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.goods_info {
				display: flex;
				align-items: flex-start;

				.cover_img {
					width: 200rpx;
					height: 160rpx;
					border-radius: 14rpx;
					margin-right: 16rpx;
				}

				>view {
					flex: 1;

					.title {
						width: 420rpx;
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						color: #1A1A1A;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.time {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #999999;
						padding: 14rpx 0 22rpx;
					}

					.other_info {
						display: flex;
						justify-content: space-between;

						.tags {
							display: flex;
							align-items: center;

							>view {
								font-size: 22rpx;
								line-height: 22rpx;
								padding: 8rpx 12rpx;
								color: #FF8F01;
								background-color: #FFF2E2;
							}

							>view:not(:last-child) {
								margin-right: 20rpx;
							}
						}

						.price {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF0404;

							.pirce_val {
								font-size: 34rpx;
								color: #FF0000;
							}
						}
					}
				}
			}
		}

		.refund_desc {
			padding: 28rpx 20rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 134rpx;

			.desc_content {
				width: 100%;
				height: 306rpx;
				background-color: #F7F7F7;
				border-radius: 6rpx;
				padding: 32rpx 20rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				textarea {
					width: 100%;
					flex: 1;
					margin-bottom: 10rpx;
					font-size:24rpx;
				}

				.img_list {
					height: 120rpx;
					display: grid;
					grid-template-columns: 140rpx 140rpx 140rpx 140rpx;

					.img {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
						position: relative;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}
						
						.del_btn {
							position: absolute;
							top: -15rpx;
							right: -15rpx;
							z-index: 6;
						}
					}

					.upload_btn {
						width: 120rpx;
						height: 120rpx;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}
					}
				}
			}
		}
		.submit_btn{
			width: 100%;
			height: 94rpx;
			border-radius: 20rpx;
			background-color: #2E80FE;
			color: #fff;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 94rpx;
			text-align: center;
		}
	}
</style>